import { Card } from 'antd';
import { useState, useEffect, useRef } from 'react'
import * as echarts from 'echarts';
import { getOption } from './echartsOptions';
import ggfwssPng from '../images/公共服务设施.png'
import SouyeApi from '../../../../../../utils/apis/SouyeApi';
export default function Ggfwss(props) {
    const chartRef = useRef();

    const [data,setData]=useState([])
    const [cztzl,setCztzl]=useState("公共服务设施")
    useEffect(()=>{
        SouyeApi.cztzl_find(cztzl).then(resp=>{
            setData(resp.data)
        })
    },[cztzl])


    const [datas, setDatas] = useState([{
        name: '学校',
        cztxl: '学校',
        value: 399
    }, {
        name: '医疗机构',
        cztxl: '医疗卫生机构',
        value: 123
    }, {
        name: '住宿机构',
        cztxl: '提供住宿的社会服务机构',
        value: 568
    }, {
        name: '公共文化场所',
        cztxl: '公共文化场所',
        value: 34
    }, {
        name: '旅游景区',
        cztxl: '旅游景区',
        value: 12
    }, {
        name: '星级饭店',
        cztxl: '星级饭店',
        value: 23
    }, {
        name: '体育场馆',
        cztxl: '体育场馆',
        value: 11
    }, {
        name: '宗教场所',
        cztxl: '宗教活动场所',
        value: 6
    }, {
        name: '大型超市',
        cztxl: '大型超市、百货店和亿元以上商品交易市场',
        value: 35
    }])

    useEffect(() => {
        const chart = echarts.init(chartRef.current);
        const option = getOption(data);
        chart.setOption(option)
    }, [data])

    return <>
        <Card title={<div className='layout-h center'>
            <img src={ggfwssPng} alt='' style={{
                width: 22,
                marginRight: 8
            }} />
            <div>公共服务设施</div>
        </div>} bordered={false} bodyStyle={{
            height: 300
        }}>
            <div className='wh100' ref={chartRef}></div>
        </Card>
    </>;
}